<template>
  <div>
    <div class="md:mx-2 md:my-2">
      <TopologyPicker class="w-full enter-x" ref="topologyPickerRef" :initData="initData" @success="handleSuccess">
      </TopologyPicker>
    </div>
    <a-tabs v-model:activeKey="activeKey" type="card" :animated="true" :tabBarGutter="0" @change="changeActive">
      <a-tab-pane key="1" tab="拓扑图">
        <!--  forceRender -->
        <Topology :start="start" :end="end" :step="step" :serviceIds="serviceIds" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="环形弧线图">
        <ArcDiagram ref="arcRef" :start="start" :end="end" :step="step" :serviceIds="serviceIds" />
      </a-tab-pane>
      <template #renderTabBar="{ DefaultTabBar, ...props }">
        <component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.8, color: 'grey' }" />
      </template>
    </a-tabs>
  </div>
</template>
<script lang="ts">
import { TabPane, Tabs, Card } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import TopologyPicker from '../common/TopologyPicker.vue';
import Topology from './components/Topology.vue';
import ArcDiagram from './components/ArcDiagram.vue';

export default defineComponent({
  components: {
    ATabs: Tabs,
    ATabPane: TabPane,
    Card,
    TopologyPicker,
    Topology,
    ArcDiagram,
  },
  setup() {
    const topologyPickerRef = ref();
    const arcRef = ref();
    const initData = ref();
    const start = ref();
    const end = ref();
    const step = ref();
    const serviceIds = ref([]);
    const activeKey = ref('1');
    const handleSuccess = (params) => {
      start.value = params.duration.start;
      end.value = params.duration.end;
      step.value = params.duration.step;
      serviceIds.value = params.services;
      if (activeKey.value === '2') {
        arcRef.value.renderArc();
      }
    };

    function changeActive(key: string) {
      if (key === '2') {
        arcRef.value.renderArc();
      }
    }

    return {
      activeKey,
      arcRef,
      topologyPickerRef,
      initData,
      start,
      end,
      step,
      changeActive,
      serviceIds,
      handleSuccess,
    };
  },
});
</script>
